import React, { useState } from 'react'
import { NavBar, Radio, List, Button } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { AddSquareOutline } from 'antd-mobile-icons'
import { Form, Input } from 'antd-mobile'
import { AddCircleOutline } from 'antd-mobile-icons'
function Index(props) {
  const nav = useNavigate()
  const [tt,settt]=useState()
  const onFinish = (values) => {
    console.log(values.contacts[0])
    settt(values.contacts[0])
    localStorage.setItem('user',JSON.stringify(values.contacts[0]))
    nav(-1)
  }
const [from]=Form.useForm()
  return (
    <div>
      <div>
        <NavBar onBack={() => nav(-1)}>新增乘客</NavBar>
      </div>
      <Button block style={{margin:'10px'}}><AddSquareOutline />证件扫描</Button>
      <div style={{margin:'10px'}}>
        <span>  <Radio>成人</Radio></span>
        <span> <Radio>儿童</Radio></span>
        <span><Radio>学生</Radio></span>
      </div>
      <div>
      <Form
        onFinish={onFinish}
        from={from}
        initialValues={{
          contacts: [{}],
        }}
        footer={
          <Button block type='submit' color='primary' size='large'>
            确定
          </Button>
        }
        mode='card'
      >
        <Form.Array
          name='contacts'
          renderAdd={() => (
            <span>
              <AddCircleOutline /> 添加
            </span>
          )}
          renderHeader={({ index }, { remove }) => (
            <>
              <a onClick={() => remove(index)} style={{ float: 'right' }}>
                删除
              </a>
            </>
          )}
        >
          {fields =>
            fields.map(({ index }) => (
              <>
                <Form.Item
                  name={[index, 'name']}
                  label='姓名'
                  rules={[{ required: true, message: '姓名不能为空' }]}
                >
                  <Input placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item name={[index, 'sfz']} label='身份证号'
                  rules={[{ required: true, message: '身份证号不能为空' }]}>
                  <Input placeholder='请输入身份证号' />
                </Form.Item>
                <Form.Item name={[index, 'addrese']} label='手机号'
                  rules={[{ required: true, message: '手机号不能为空' }]}>
                  <Input placeholder='请输入手机号' />
                </Form.Item>
              </>
            ))
          }
        </Form.Array>
      </Form>
      </div>
    </div>
  )
}

export default Index
